<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
		<script src="js/serverUrl.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/mint.js"></script>
		<script src="js/moment.js"></script>
		<style type="text/css">
			.teacherInfoContainer{
				display: flex;
				flex-direction: column;
				width: 100vw;
			}
			.teacherPhoto{
				width: 100vw;
				height: 66vw;
			}
			.teacherName{
				margin-top: 10px;
				font-size: 18px;
				font-weight: bold;
				margin-left: 10px;
			}
			.teacherInfo{
				margin-top: 10px;
				margin-left: 10px;
				margin-right: 10px;
				font-size: 13px;
				color: black;
				text-indent: 1.5em;
				line-height: 25px;
			}
			.titleContainer{
				display: flex;
				align-items: center;
				margin-left: 10px;
				margin-top: 15px;
			}
			.titleImage{
				height: 20px;
				width: 20px;
				
			}
			.titleNmae{
				font-size: 16px;
				font-weight: bold;
				margin-left: 8px;
			}
		</style>
	<body style="background-color: white;">
		<div id="app">
			<div class="teacherInfoContainer">
				<img class="teacherPhoto" :src="serverUrl + teacher.teacherPhotoUrl" />
				<div class="teacherName">{{teacher.teacherName}}</div>
				<div class="teacherInfo" style="text-indent: 0;">{{teacher.qualification}}</div>
				
				<div class="titleContainer">
					<img  class="titleImage" src="img/shjz.png"/>
					<div class="titleNmae">社会兼职及从师经历</div>
				</div>
				<div class="teacherInfo">{{teacher.experience}}</div>
				
				<div class="titleContainer">
					<img  class="titleImage" src="img/zytc.png"/>
					<div class="titleNmae">专业特长</div>
				</div>
				<div class="teacherInfo">{{teacher.specialty}}</div>
				
				<div class="titleContainer">
					<img  class="titleImage" src="img/shjz.png"/>
					<div class="titleNmae">主修课程</div>
				</div>
				<div class="teacherInfo">{{teacher.teacherMajor}}</div>
				
				<div class="titleContainer">
					<img  class="titleImage" src="img/skfg.png"/>
					<div class="titleNmae">授课风格</div>
				</div>
				<div class="teacherInfo">{{teacher.style}}</div>
				
				<div class="titleContainer">
					<img  class="titleImage" src="img/jszg.png"/>
					<div class="titleNmae">师资简介</div>
				</div>
				<div class="teacherInfo">{{teacher.brief}}</div>
				
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data:{
			  teacher: {}
		  },
		  created() {
              window.getTeacherInfo = this.getTeacherInfo
		  },
		  methods:{
			  getTeacherInfo (teacherJson){
                  this.teacher = teacherJson
			  }
		  }
		})		
		</script>
</html>
